﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to customzie the rendering of the jqxGrid's Pager.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var theme = '';
             var source =
            {
                localdata: generatedata(55),
                datatype: "array"
            };

             var dataAdapter = new $.jqx.dataAdapter(source);
             var self = this;
             var pagerrenderer = function () {
                 var element = $("<div style='margin-left: 10px; margin-top: 5px; width: 100%; height: 100%;'></div>");
                 var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                 var paginginfo = datainfo.paginginformation;

                 var leftButton = $("<div style='padding: 0px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                 leftButton.find('div').addClass('icon-arrow-left');
                 leftButton.width(36);
                 leftButton.jqxButton({ theme: theme });

                 var rightButton = $("<div style='padding: 0px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
                 rightButton.find('div').addClass('icon-arrow-right');
                 rightButton.width(36);
                 rightButton.jqxButton({ theme: theme });

                 leftButton.appendTo(element);
                 rightButton.appendTo(element);

                 var label = $("<div style='font-size: 11px; margin: 2px 3px; font-weight: bold; float: left;'></div>");
                 label.text("1-" + paginginfo.pagesize + ' of ' + datainfo.rowscount);
                 label.appendTo(element);
                 self.label = label;
                 // update buttons states.
                 var handleStates = function (event, button, className, add) {
                     button.bind(event, function () {
                         if (add == true) {
                             button.find('div').addClass(className);
                         }
                         else button.find('div').removeClass(className);
                     });
                 }

                 if (theme != '') {
                     handleStates('mousedown', rightButton, 'icon-arrow-right-selected-' + theme, true);
                     handleStates('mouseup', rightButton, 'icon-arrow-right-selected-' + theme, false);
                     handleStates('mousedown', leftButton, 'icon-arrow-left-selected-' + theme, true);
                     handleStates('mouseup', leftButton, 'icon-arrow-left-selected-' + theme, false);

                     handleStates('mouseenter', rightButton, 'icon-arrow-right-hover-' + theme, true);
                     handleStates('mouseleave', rightButton, 'icon-arrow-right-hover-' + theme, false);
                     handleStates('mouseenter', leftButton, 'icon-arrow-left-hover-' + theme, true);
                     handleStates('mouseleave', leftButton, 'icon-arrow-left-hover-' + theme, false);
                 }

                 rightButton.click(function () {
                     $("#jqxgrid").jqxGrid('gotonextpage');
                 });

                 leftButton.click(function () {
                     $("#jqxgrid").jqxGrid('gotoprevpage');
                 });

                 return element;
             }

             $("#jqxgrid").bind('pagechanged', function () {
                 var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                 var paginginfo = datainfo.paginginformation;
                 self.label.text(1 + paginginfo.pagenum * paginginfo.pagesize + "-" + Math.min(datainfo.rowscount, (paginginfo.pagenum + 1) * paginginfo.pagesize) + ' of ' + datainfo.rowscount);
             });

             $("#jqxgrid").jqxGrid(
            {
                theme: theme,
                source: dataAdapter,
                columnsresize: true,
                width: 650,
                pageable: true,
                autoheight: true,
                pagerrenderer: pagerrenderer,
                columns: [
                  { text: 'First Name', dataField: 'firstname', width: 100 },
                  { text: 'Last Name', dataField: 'lastname', width: 100 },
                  { text: 'Product', dataField: 'productname', width: 170 },
                  { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', dataField: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
         });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>
